<template>
  <div>
	<CitySelector v-if="showCityPicker" :selected-city="destination" @select="handleCitySelect" @close="showCityPicker = false"/>
    <div class="HBox" style="background-color: #00aa00;">
      <button class="Button" :disabled="!isClearEnabled" @click="clearFields">
		清空
	  </button>
	  <button class="Button" :disabled="!isCalculateEnabled" @click="calculate">
		计算
	  </button>
    </div>

    <form>
      <div class="HBox">
        <label for="fee">资费</label>
        <input type="number" v-model="fee" id="fee">
		<label>元</label>
      </div>

      <div class="HBox" @click="chooseCity">
        <label for="destination">寄达地</label>
        <input type="text" v-model="destination" id="destination" placeholder="城市名">
		<label>
		  <FontAwesomeIcon icon= 'chevron-right' />
		</label>
      </div>

      <div class="HBox">
        <label for="weight">重量</label>
        <input type="number" v-model="weight" id="weight">
		<label>千克</label>
      </div>
    </form>

    <section class="result" v-if="showResults">
      <h3>计算结果 - {{tempdestination}}</h3>
      <ul>
        <li><span>收入:</span> {{ income }} 元</li>
        <li><span>结算成本:</span> {{ settlementCost }} 元</li>
        <li><span>结算差额率:</span> {{ settlementDifferenceRate }} %</li>
        <li><span>收寄成本:</span> {{ collectionCost }} 元</li>
        <li><span>毛利:</span> {{ grossProfit }} 元</li>
        <li><span>毛利率:</span> {{ grossProfitRate }} %</li>
      </ul>
    </section>
  </div>
</template>

<script>
import { getResult } from '@/utils/dataService.js';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import CitySelector from './CitySelector.vue';

export default {
  components:{
	CitySelector
  },
  data() {
    return {
		data: [],
		fee: '',
		destination: '',
		tempdestination: '',
		weight: '',
		showResults: false,
		showCityPicker: false,
		income: 0,
		settlementCost: 0,
		settlementDifferenceRate: 0,
		collectionCost: 0,
		grossProfit: 0,
		grossProfitRate: 0
    };
  },
  computed: {
      isClearEnabled() {
        return this.fee || !!this.destination || this.weight ;
      },
      isCalculateEnabled() {
        return this.fee && !!this.destination && this.weight ;
      }
    },
  methods: {
	async fetchData() {
		try {
			this.data = await getResult(this.destination, this.weight);
		}catch (err) {
			console.error(err);
		}
	},
    clearFields() {
		this.fee = '';
		this.destination = '';
		this.weight = '';
		this.showResults = false;
    },
    async calculate() {
		await this.fetchData();
		// this.data= [inside, manage_cost, transport_cost, deliver_cost, collection_cost]
		console.log('data:', this.data);
		this.income = (parseFloat(this.fee)/1.06).toFixed(2);
		this.settlementCost = (this.data.manage_cost + this.data.transport_cost + this.data.deliver_cost).toFixed(2);
		this.settlementDifferenceRate = (100 * (1 - (this.settlementCost / this.income))).toFixed(2);
		this.collectionCost = this.data.collection_cost,
		this.grossProfit = (this.income - this.settlementCost - this.collectionCost).toFixed(2),
		this.grossProfitRate = (this.grossProfit / this.income * 100).toFixed(2);
		this.tempdestination = this.destination;
		this.showResults = true;
    },
	chooseCity() {
	  this.showCityPicker = true; // 显示选择器
	},
	handleCitySelect(city) {
	  this.destination = city; // 更新选中的城市
	  this.showCityPicker = false; // 关闭选择器
	},
  }
};
</script>

<style scoped>

label {
	width: 30%;
	height: auto;
	text-align: start;
	padding: min(20rpx,10px);
	font-size: min(40rpx,20px);
	background-color: #dfdfdf;
}

input, select {
	width: 100%;
	height: auto;
	padding: min(20rpx,10px);
	box-sizing: border-box;
	text-align: end;
	font-size: min(40rpx,20px);
	background-color: #dfdfdf;
}

.result {
  margin: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.result h3 {
  padding: 10px;
  font-size: 1.5em;
  background-color: aqua;
  border-radius: 5px;
}

.result ul {
  list-style-type: none;
  padding: 0 20px;
  margin: 0;
}

.result ul li {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.result li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 1.1em;
  color: #666;
}

.result li span {
  font-weight: bold;
  color: #333;
}
</style>